import { useSnapshot } from 'valtio';
import { Form, Radio, Space } from 'szcd';
import { type IControlView } from '../base';
import { type Option } from '../../types';
import styles from './index.module.less';

export interface IUserSelectorView extends IControlView {
  /** 当前选择器类型 */
  value?: string;
  /** 修改选择器类型 */
  onChange: (value: string) => void;
  /** 选择器 */
  selectors: Option[]
  /** 选择器 */
  selector?: {
    component?: React.FC<{ service: unknown }>
  }
}

const UserSelector: React.FC<{ service: IUserSelectorView } & React.HTMLAttributes<HTMLDivElement>> = ({
  service,
  ...restProps
}) => {
  const snap = useSnapshot(service);
  return (
    <Form.Item label={snap.label && service.label} style={restProps.style}>
      <Space className={styles.box} direction="vertical" size={16} style={{ width: '100%' }}>

        {snap.selectors
          && <Radio.Group
            value={snap.value}
            optionType="button"
            options={snap.selectors.map((item) => ({ label: item.label, value: item.value }))}
            onChange={(e) => {
              service.onChange(e.target.value);
            }}
          />}
        {snap.selector && service.selector && service.selector.component && <service.selector.component service={service.selector} />}

      </Space>
    </Form.Item>

  );
};

export default UserSelector;
